<template>
  <div style="background-color: #f0f2f5; padding: 0px;">
    <PageHeader
        :breadcrumb="breadcrumb"
        style="background-color: white; padding: 24px; margin-bottom: 16px;"
    />
    <div style="background-color: white; padding: 24px; padding-top: 0px;">
      <div id="operationButton">
        <a-button
            v-if="canAddPhysicalProperty"
            size="large"
            type="primary"
            @click="onAddButtonClick"
        >
          添加
        </a-button>
        &nbsp;&nbsp;
        <a-button
            size="large"
            type="primary"
            @click="onRefresh"
        >
          刷新
        </a-button>
        <a-modal
            v-model:visible="addOrEditDialogVisible"
            :title="addOrEditDialogTitle"
            :width="600"
            :keyboard="false"
            :maskClosable="false"
            :footer="null"
            :destroyOnClose="true"
            centered
        >
          <AddOrEditPhysicalProperty
              :url="editUrl"
              @operate-success="onAddOrEditSuccess"
              @operate-failed="closeAddOrEditDialog"
          />
        </a-modal>
      </div>
      <a-table
          :loading="loading"
          :columns="columns"
          :data-source="data"
          :pagination="{ pageSize: 10 }"
          :scroll="{ x: 240 }"
      >
        <template
            v-if="canEditPhysicalProperty || canDeletePhysicalProperty"
            #operation="{ record }"
        >
          <TableOperation
              :canEdit="canEditPhysicalProperty"
              :canDelete="canDeletePhysicalProperty"
              @edit="onEdit(record.key)"
              @delete="onDelete(record.key)"
          />
        </template>
        <template #filterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
          <div style="padding: 8px">
            <a-input
                :ref="c => (searchInput = c)"
                :placeholder="`查询 ${column.title}`"
                :value="selectedKeys[0]"
                style="width: 188px; margin-bottom: 8px; display: block;"
                @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
                @pressEnter="handleSearch(selectedKeys, confirm, column.dataIndex)"
            />
            <a-button
                type="primary"
                size="small"
                style="width: 90px; margin-right: 8px"
                @click="handleSearch(selectedKeys, confirm, column.dataIndex)"
            >
              <template #icon>
                <SearchOutlined/>
              </template>
              查询
            </a-button>
            <a-button size="small" style="width: 90px" @click="handleReset(clearFilters)">
              重置
            </a-button>
          </div>
        </template>
        <template #filterIcon="filtered">
          <search-outlined :style="{ color: filtered ? '#108ee9' : undefined }"/>
        </template>
        <template #customRender="{ text, column }">
              <span v-if="searchText && searchedColumn === column.dataIndex">
                <template
                    v-for="(fragment, i) in text
                    .toString()
                    .split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
                >
                  <mark
                      v-if="fragment.toLowerCase() === searchText.toLowerCase()"
                      :key="i"
                      class="highlight"
                  >
                    {{ fragment }}
                  </mark>
                  <template v-else>{{ fragment }}</template>
                </template>
              </span>
          <template v-else>
            {{ text }}
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script>
import AddOrEditPhysicalProperty from './AddOrEditPhysicalProperty'
import TableOperation from '../../Common/TableOperation'
import {message} from "ant-design-vue";
import PageHeader from '../../Common/PageHeader'
import {SearchOutlined} from '@ant-design/icons-vue'


const operationColumn = {
  title: '操作',
  dataIndex: 'operation',
  slots: { customRender: 'operation' },
  width: 150,
}

export default {
  name: 'PhysicalProperty',
  emits: ['add'],
  components:{
    PageHeader,
    AddOrEditPhysicalProperty,
    TableOperation,
    SearchOutlined,
  },
  data() {
    const refreshInterval = 100
    return {
      breadcrumb: [
        { key: 1, title: '性能数据管理' },
        { key: 2, title: '物理性能' },
      ],
      data: [],
      loading: false,
      addOrEditDialogVisible: false,
      addOrEditDialogTitle: '',
      editUrl: '',
      canAddPhysicalProperty: false,
      canEditPhysicalProperty: false,
      canDeletePhysicalProperty: false,
      columns: [],
      searchText: '',
      searchInput: null,
      searchedColumn: '',
      refreshInterval,
    }
  },
  mounted() {
    this.columns = this.getDataColumns()
    this.processPermission()
    this.fetch()
  },
  methods: {
    getDataColumns(){
      return [
        {
          title: '样品名称',
          dataIndex: 'sample_name',
          width: 150,
          key: 'sample_name',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '合金代码',
          dataIndex: 'alloy_code',
          width: 150,
          key: 'alloy_code',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '密度',
          dataIndex: 'density',
          width: 150,
          key: 'density',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '熔点',
          dataIndex: 'melting_point',
          width: 150,
          key: 'melting_point',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '沸点',
          dataIndex: 'boiling_point',
          width: 150,
          key: 'boiling_point',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '致密度',
          dataIndex: 'sample_density',
          width: 150,
          key: 'sample_density',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '电导率',
          dataIndex: 'conductivity',
          width: 150,
          key: 'conductivity',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '电阻率',
          dataIndex: 'resistivity',
          width: 150,
          key: 'resistivity',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '热导率',
          dataIndex: 'thermal_conductivity',
          width: 150,
          key: 'thermal_conductivity',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '热膨胀系数',
          dataIndex: 'thermal_expansion_coefficient',
          width: 150,
          key: 'thermal_expansion_coefficient',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '导磁率',
          dataIndex: 'permeability',
          width: 150,
          key: 'permeability',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '磁饱和强度',
          dataIndex: 'magnetic_saturation',
          width: 150,
          key: 'magnetic_saturation',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '剩磁',
          dataIndex: 'remanence',
          width: 150,
          key: 'remanence',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '矫顽力',
          dataIndex: 'coercive_force',
          width: 150,
          key: 'coercive_force',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '液相线温度',
          dataIndex: 'liquid_temperature',
          width: 150,
          key: 'liquid_temperature',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '固相线温度',
          dataIndex: 'solidus_temperature',
          width: 150,
          key: 'solidus_temperature',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '熔程',
          dataIndex: 'melting_process',
          width: 150,
          key: 'melting_process',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '焓',
          dataIndex: 'enthalpy',
          width: 150,
          key: 'enthalpy',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '过冷度',
          dataIndex: 'supercooling_degree',
          width: 150,
          key: 'supercooling_degree',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '热扩散系数',
          dataIndex: 'thermal_diffusion_coefficient',
          width: 150,
          key: 'thermal_diffusion_coefficient',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '比热容',
          dataIndex: 'specific_heat_capacity',
          width: 150,
          key: 'specific_heat_capacity',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '湿润力',
          dataIndex: 'wetting_force',
          width: 150,
          key: 'wetting_force',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '湿润率',
          dataIndex: 'wetting_rate',
          width: 150,
          key: 'wetting_rate',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '湿润时间',
          dataIndex: 'wetting_time',
          width: 150,
          key: 'wetting_time',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '铺展率',
          dataIndex: 'spreading_rate',
          width: 150,
          key: 'spreading_rate',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '铺展面积',
          dataIndex: 'spreading_square',
          width: 150,
          key: 'spreading_square',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '湿润角',
          dataIndex: 'wetting_angle',
          width: 150,
          key: 'wetting_angle',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '摩尔热容',
          dataIndex: 'molar_heat_capacity',
          width: 150,
          key: 'molar_heat_capacity',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '阻抗',
          dataIndex: 'impedance',
          width: 150,
          key: 'impedance',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '阻抗曲线',
          dataIndex: 'impedance_curve',
          width: 150,
          key: 'impedance_curve',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
        {
          title: '放射性',
          dataIndex: 'radioactive',
          width: 150,
          key: 'radioactive',
          slots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
                  record.name
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                // console.log(this.searchInput);
                this.searchInput.focus();
              }, 0);
            }
          },
  },
]
    },
    processPermission() {
      this.axios
        .get(
          '/has_permission?permission=property_management.add_physical_property'
        )
        .then((res) => {
          this.canAddPhysicalProperty = res.data.result
        })
        .catch((error) => {
          console.log('Error', error.message)
        })
      this.axios
        .get(
          '/has_permission?permission=property_management.change_physical_property'
        )
        .then((res) => {
          this.canEditPhysicalProperty = res.data.result
          let last = this.columns.length
          if (
            this.columns[last - 1].dataIndex !== 'operation' &&
            this.canEditPhysicalProperty
          ) {
            this.columns.push(operationColumn)
          }
        })
        .catch((error) => {
          console.log('Error', error.message)
        })
      this.axios
        .get(
          '/has_permission?permission=property_management.delete_physical_property'
        )
        .then((res) => {
          this.canDeletePhysicalProperty = res.data.result
          let last = this.columns.length
          if (
            this.columns[last - 1].dataIndex !== 'operation' &&
            this.canDeletePhysicalProperty
          ) {
            this.columns.push(operationColumn)
          }
        })
        .catch((error) => {
          console.log('Error', error.message)
        })
    },
    fetch() {
      this.loading = true
      let updateData = []
      this.axios.get('/property_management/physical_property/')
        .then((res) => {
          const data = res.data
          for (let i = 0; i < data.length; ++i) {
            updateData.push({
              key: data[i].url,
              sample_name: data[i].sample_name,
              alloy_code: data[i].readable_alloy_code,
              density: data[i].density,
              melting_point: data[i].melting_point,
              boiling_point: data[i].boiling_point,
              sample_density: data[i].sample_density,
              conductivity: data[i].conductivity,
              resistivity: data[i].resistivity,
              thermal_conductivity: data[i].thermal_conductivity,
              thermal_expansion_coefficient: data[i].thermal_expansion_coefficient,
              permeability: data[i].permeability,
              magnetic_saturation: data[i].magnetic_saturation,
              remanence: data[i].remanence,
              coercive_force: data[i].coercive_force,
              liquid_temperature: data[i].liquid_temperature,
              solidus_temperature: data[i].solidus_temperature,
              melting_process: data[i].melting_process,
              enthalpy: data[i].enthalpy,
              supercooling_degree: data[i].supercooling_degree,
              thermal_diffusion_coefficient: data[i].thermal_diffusion_coefficient,
              specific_heat_capacity: data[i].specific_heat_capacity,
              wetting_force: data[i].wetting_force,
              wetting_rate: data[i].wetting_rate,
              wetting_time: data[i].wetting_time,
              spreading_rate: data[i].spreading_rate,
              spreading_square: data[i].spreading_square,
              wetting_angle: data[i].wetting_angle,
              molar_heat_capacity: data[i].molar_heat_capacity,
              impedance: data[i].impedance_filename,
              impedance_curve: data[i].impedance_curve_filename,
              radioactive: data[i].radioactive,
            })
          }
          setTimeout(() => {
            this.data = updateData
            this.loading = false
          }, this.refreshInterval)
          //   console.log(res)
        })
        .catch((error) => {
          setTimeout(() => {
            this.loading = false
          }, this.refreshInterval)
          console.log('Error', error.message)
        })
    },
    onAddButtonClick() {
      this.addOrEditDialogTitle = "添加物理性能"
      this.editUrl = ''
      this.addOrEditDialogVisible = true
    },
    onAddOrEditSuccess() {
      this.closeAddOrEditDialog()
      this.fetch()
    },
    closeAddOrEditDialog() {
      this.addOrEditDialogVisible = false
    },
    onEdit(key) {
      this.addOrEditDialogTitle = "编辑物理性能"
      //console.log(key)
      this.editUrl = key
      this.addOrEditDialogVisible = true
    },
    onDelete(key) {
      // console.log('hello' , key)
      message.loading({ content: '删除中...', key })
      const data = [...this.data]
      this.axios
        .delete(key)
        .then(() => {
          setTimeout(() => {
            message.success({ content: '删除成功！', key, duration: 2 })
            this.data = data.filter((item) => item.key !== key)
          }, 1000)
        })
        .catch((error) => {
          setTimeout(() => {
            message.error({ content: '删除失败！', key, duration: 2 })
          }, 1000)
          console.log('Error', error.message)
        })
    },
    handleSearch(selectedKeys, confirm, dataIndex) {
      confirm();
      // console.log(selectedKeys[0]);
      this.searchText = selectedKeys[0];
      this.searchedColumn = dataIndex;
      //this.$forceUpdate();
    },
    handleReset(clearFilters) {
      clearFilters();
      this.searchText = '';
    },
    onRefresh() {
      this.fetch()
    },

  },
}
</script>


<style>
#operationButton {
  text-align: right;
}
</style>
